<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>动态改变图片透明度</title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<img id="pic" v-bind:src="url" v-on:mouseover="visible(1)" v-on:mouseout="visible(0)">
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		url : 'images/flower.jpg'//图片URL
	},
	methods : {
		visible : function(i){
			var pic = document.getElementById('pic');
			if(i == 1){
				pic.style.opacity = 0.5;
			}else{
				pic.style.opacity = 1;
			}
		}
	}
})
</script>


</body>

</html>



